@use 'sass:map';

// 响应式断点变量
$breakpoints: (
    'xs': 480px,
    // 超小屏幕 (手机竖屏)
    'sm': 768px,
    // 小屏幕 (手机横屏/平板竖屏)
    'md': 992px,
    // 中等屏幕 (平板横屏)
    'lg': 1200px,
    // 大屏幕 (桌面端)
    'xl': 1600px // 超大屏幕
);

// 响应式断点混合器
@mixin respond-to($breakpoint) {
    @if map.has-key($breakpoints, $breakpoint) {
        @media (max-width: map.get($breakpoints, $breakpoint)) {
            @content;
        }
    }

    @else {
        @media (max-width: $breakpoint) {
            @content;
        }
    }
}

// 移动优先断点混合器
@mixin respond-from($breakpoint) {
    @if map.has-key($breakpoints, $breakpoint) {
        @media (min-width: map.get($breakpoints, $breakpoint)) {
            @content;
        }
    }

    @else {
        @media (min-width: $breakpoint) {
            @content;
        }
    }
}

// 栅格系统
@mixin grid($columns: 1, $gap: 16px) {
    display: grid;
    grid-template-columns: repeat($columns, 1fr);
    gap: $gap;

    @include respond-to('md') {
        grid-template-columns: repeat(max(1, $columns - 1), 1fr);
    }

    @include respond-to('sm') {
        grid-template-columns: repeat(max(1, $columns - 2), 1fr);
    }

    @include respond-to('xs') {
        grid-template-columns: 1fr;
    }
}

// 常用布局辅助类
.mobile-only {
    display: none;

    @include respond-to('sm') {
        display: block;
    }
}

.desktop-only {
    display: block;

    @include respond-to('sm') {
        display: none;
    }
}

// 移动端触摸友好辅助类
.touch-friendly {
    @include respond-to('sm') {
        min-height: 44px;
        min-width: 44px;
        padding: 12px;

        &.el-button {
            padding: 12px 16px;
            font-size: 16px;
        }
    }
}